WebXR-i tabamustesti tulemus: Kiirte heitmise tulemuste töötlemine kaasahaaravate kogemuste jaoks

WebXR Device API avab põnevaid võimalusi kaasahaaravate liitreaalsuse (AR) ja virtuaalreaalsuse (VR) kogemuste loomiseks otse veebilehitsejas. Interaktiivsete WebXR-rakenduste ehitamise üheks põhiaspektiks on tabamustestide tulemuste mõistmine ja tõhus kasutamine. See blogipostitus annab põhjaliku juhendi kiirte heitmise teel saadud tabamustestide tulemuste töötlemiseks, võimaldades teil luua oma WebXR-stseenides intuitiivseid ja kaasahaaravaid kasutajainteraktsioone.

Mis on kiirte heitmine ja miks see on WebXR-is oluline?

Kiirte heitmine on tehnika, mida kasutatakse kindlakstegemiseks, kas kindlast punktist ja suunast lähtuv kiir lõikub 3D-stseenis olevate objektidega. WebXR-is kasutatakse kiirte heitmist tavaliselt kasutaja pilgu või virtuaalse objekti trajektoori simuleerimiseks. Kui kiir lõikub reaalse maailma pinnaga (AR-is) või virtuaalse objektiga (VR-is), genereeritakse tabamustesti tulemus.

Tabamustestide tulemused on olulised mitmel põhjusel:

• Virtuaalsete objektide paigutamine: AR-is võimaldavad tabamustestid paigutada virtuaalseid objekte täpselt reaalmaailma pindadele, nagu lauad, põrandad või seinad.
• Kasutaja interaktsioon: Jälgides, kuhu kasutaja vaatab või osutab, võimaldavad tabamustestid interaktsiooni virtuaalsete objektidega, näiteks nende valimist, manipuleerimist või aktiveerimist.
• Navigeerimine: VR-keskkondades saab tabamusteste kasutada navigatsioonisüsteemide rakendamiseks, võimaldades kasutajatel teleporteeruda või stseenis ringi liikuda, osutades kindlatele asukohtadele.
• Kokkupõrke tuvastamine: Tabamusteste saab kasutada elementaarseks kokkupõrke tuvastamiseks, tehes kindlaks, millal virtuaalne objekt põrkub kokku teise objekti või reaalse maailmaga.

WebXR-i tabamustesti API mõistmine

WebXR Hit Test API pakub vajalikke tööriistu kiirte heitmise teostamiseks ja tabamustestide tulemuste saamiseks. Siin on ülevaade peamistest mõistetest ja funktsioonidest:

XRRay

XRRay esindab kiirt 3D-ruumis. See on määratletud lähtepunkti ja suunavektoriga. Saate luua XRRay, kasutades meetodit XRFrame.getPose(), mis tagastab jälgitava sisendallika (nt kasutaja pea, käekontroller) poosi. Poosist saate tuletada kiire lähtepunkti ja suuna.

XRHitTestSource

XRHitTestSource esindab tabamustestide tulemuste allikat. Tabamustesti allika saate luua, kasutades meetodit XRSession.requestHitTestSource() või XRSession.requestHitTestSourceForTransientInput(). Esimest meetodit kasutatakse tavaliselt pidevaks tabamustestimiseks, mis põhineb püsival allikal, nagu kasutaja pea asend, samas kui teine on mõeldud lühiajaliste sisendsündmuste jaoks, nagu nupuvajutused või žestid.

XRHitTestResult

XRHitTestResult esindab ühte lõikepunkti kiire ja pinna vahel. See sisaldab teavet lõikepunkti kohta, näiteks kaugust kiire lähtepunktist tabamuspunktini ja tabamuspunkti poosi stseeni koordinaatsüsteemis.

XRHitTestResult.getPose()

See meetod tagastab tabamuspunkti XRPose. Poos sisaldab tabamuspunkti asukohta ja orientatsiooni, mida saab kasutada virtuaalsete objektide paigutamiseks või muude teisenduste tegemiseks.

Tabamustestide tulemuste töötlemine: Samm-sammuline juhend

Vaatame läbi tabamustestide tulemuste hankimise ja töötlemise protsessi WebXR-rakenduses. See näide eeldab, et kasutate renderdusmootorit nagu three.js või Babylon.js.

1. Tabamustesti allika taotlemine

Kõigepealt peate taotlema tabamustesti allikat XRSession'ilt. Tavaliselt tehakse seda pärast seansi algust. Peate määrama koordinaatsüsteemi, milles soovite tabamustestide tulemusi saada. Näiteks:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Selgitus:

• xrSession.requestHitTestSource(): See funktsioon taotleb XR-seansilt tabamustesti allikat.
• { space: xrSession.viewerSpace }: See määrab koordinaatsüsteemi, milles tabamustestide tulemused tagastatakse. viewerSpace on suhteline vaataja asukohale, samas kui local on suhteline XR-i alguspunktile. Saate kasutada ka localFloor-i jälgimiseks suhtes põrandaga.
• Vigade käsitlemine: try...catch plokk tagab, et tabamustesti allika loomisel tekkinud vead püütakse kinni ja logitakse.

2. Tabamustesti teostamine animatsioonitsüklis

Oma animatsioonitsükli sees (funktsioon, mis renderdab iga kaadri) peate teostama tabamustesti, kasutades meetodit XRFrame.getHitTestResults(). See meetod tagastab XRHitTestResult objektide massiivi, mis esindab kõiki stseenist leitud lõikepunkte.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Selgitus:

• frame.getViewerPose(xrSession.referenceSpace): Hangib vaataja (peakomplekti) poosi. See on vajalik, et teada, kus vaataja on ja kuhu ta vaatab.
• frame.getHitTestResults(xrHitTestSource): Teostab tabamustesti, kasutades eelnevalt loodud tabamustesti allikat.
• hitTestResults.length > 0: Kontrollib, kas leiti lõikepunkte.

3. Tabamustestide tulemuste töötlemine

Funktsioon processHitTestResults() on koht, kus tegelete tabamustesti tulemustega. See hõlmab tavaliselt virtuaalse objekti asukoha ja orientatsiooni uuendamist vastavalt tabamuspunkti poosile.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Selgitus:

• hitTestResults[0]: Hangib esimese tabamustesti tulemuse. Kui on võimalik mitu lõikepunkti, peate võib-olla läbima kogu massiivi ja valima kõige sobivama tulemuse vastavalt oma rakenduse loogikale.
• hit.getPose(xrSession.referenceSpace): Hangib tabamuspunkti poosi määratud koordinaatsüsteemis.
• virtualObject.position.set(...) ja virtualObject.quaternion.set(...): Uuendage virtuaalse objekti (nt three.js Mesh) asukohta ja pööret (kvaterniooni), et see vastaks tabamuspunkti poosile.
• Visuaalne tagasiside: Näide sisaldab ka koodi visuaalse tagasiside kuvamiseks tabamuspunktis, näiteks ringi või lihtsa markeri, et aidata kasutajal mõista, kus ta stseeniga interakteerub.

Täiustatud tabamustestimise tehnikad

Lisaks ülaltoodud põhinäitele on mitmeid täiustatud tehnikaid, mida saate oma tabamustestimise rakenduste täiustamiseks kasutada:

Tabamustestimine lühiajalise sisendiga

Interaktsioonide jaoks, mille käivitab lühiajaline sisend, nagu nupuvajutused või käeliigutused, saate kasutada meetodit XRSession.requestHitTestSourceForTransientInput(). See meetod loob tabamustesti allika, mis on spetsiifiline ühele sisendsündmusele. See on kasulik tahtmatute interaktsioonide vältimiseks, mis põhinevad pideval tabamustestimisel.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Tabamustestide tulemuste filtreerimine

Mõnel juhul võiksite tabamustestide tulemusi filtreerida kindlate kriteeriumide alusel, näiteks kaugus kiire lähtepunktist või lõikunud pinna tüüp. Saate seda teha, filtreerides XRHitTestResult massiivi käsitsi pärast selle hankimist.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Erinevate koordinaatsüsteemide kasutamine

Koordinaatsüsteemi valik (viewerSpace, local, localFloor või muud kohandatud süsteemid) mõjutab oluliselt, kuidas tabamustestide tulemusi tõlgendatakse. Kaaluge järgmist:

• viewerSpace: Annab tulemused suhtes vaataja asukohaga. See on kasulik interaktsioonide loomiseks, mis on otseselt seotud kasutaja pilguga.
• local: Annab tulemused suhtes XR-i alguspunktiga (XR-seansi alguspunkt). See sobib kogemuste loomiseks, kus objektid jäävad füüsilises keskkonnas paigale.
• localFloor: Sarnane local-ile, kuid Y-telg on joondatud põrandaga. See lihtsustab objektide põrandale paigutamise protsessi.

Valige koordinaatsüsteem, mis vastab kõige paremini teie rakenduse nõuetele. Katsetage erinevate koordinaatsüsteemidega, et mõista nende käitumist ja piiranguid.

Tabamustestimise optimeerimisstrateegiad

Tabamustestimine võib olla arvutusmahukas protsess, eriti keerukates stseenides. Siin on mõned optimeerimisstrateegiad, mida kaaluda:

• Piirake tabamustestide sagedust: Teostage tabamusteste ainult siis, kui see on vajalik, mitte igas kaadris. Näiteks võiksite tabamusteste teostada ainult siis, kui kasutaja aktiivselt stseeniga interakteerub.
• Kasutage piirdekehade hierarhiat (BVH): Kui teostate tabamusteste suure hulga objektide vastu, kaaluge BVH kasutamist lõikumisarvutuste kiirendamiseks. Teegid nagu three.js ja Babylon.js pakuvad sisseehitatud BVH implementatsioone.
• Ruumiline jaotamine: Jagage stseen väiksemateks piirkondadeks ja teostage tabamusteste ainult nende piirkondade vastu, mis tõenäoliselt sisaldavad lõikepunkte. See võib oluliselt vähendada kontrollitavate objektide arvu.
• Vähendage polügoonide arvu: Lihtsustage oma mudelite geomeetriat, et vähendada testitavate polügoonide arvu. See võib parandada jõudlust, eriti mobiilseadmetes.
• WebWorker: suunake arvutused veebitöölisele (web worker), et tagada, et tabamustesti protsess ei blokeeriks põhilõime.

Platvormideülesed kaalutlused

WebXR-i eesmärk on olla platvormideülene, kuid eri seadmete ja brauserite vahel võib esineda peeneid erinevusi käitumises. Pidage silmas järgmist:

• Seadme võimekused: Kõik seadmed ei toeta kõiki WebXR-i funktsioone. Kasutage funktsioonide tuvastamist, et teha kindlaks, millised funktsioonid on saadaval, ja kohandage oma rakendust vastavalt.
• Sisendprofiilid: Erinevad seadmed võivad kasutada erinevaid sisendprofiile (nt generic-touchscreen, hand-tracking, gamepad). Veenduge, et teie rakendus toetab mitut sisendprofiili ja pakub sobivaid varumehhanisme.
• Jõudlus: Jõudlus võib eri seadmetes oluliselt erineda. Optimeerige oma rakendus kõige madalama jõudlusega seadmete jaoks, mida kavatsete toetada.
• Brauseri ühilduvus: Veenduge, et teie rakendus on testitud ja töötab peamistes brauserites nagu Chrome, Firefox ja Edge.

Ülemaailmsed näited WebXR-rakendustest, mis kasutavad tabamustestimist

Siin on mõned näited WebXR-rakendustest, mis kasutavad tõhusalt tabamustestimist, et luua köitvaid ja intuitiivseid kasutajakogemusi:

• IKEA Place (Rootsi): Võimaldab kasutajatel paigutada IKEA mööblit virtuaalselt oma koju, kasutades AR-i. Tabamustestimist kasutatakse mööbli täpseks positsioneerimiseks põrandale ja teistele pindadele.
• Sketchfab AR (Prantsusmaa): Võimaldab kasutajatel vaadata Sketchfabi 3D-mudeleid AR-is. Tabamustestimist kasutatakse mudelite paigutamiseks reaalsesse maailma.
• Augmented Images (Erinevad): Paljud AR-rakendused kasutavad pildituvastust koos tabamustestimisega, et ankurdada virtuaalset sisu konkreetsete piltide või markerite külge reaalses maailmas.
• WebXR mängud (Üleilmsed): WebXR-i abil arendatakse arvukalt mänge, millest paljud tuginevad tabamustestimisele objektide paigutamisel, interaktsioonil ja navigeerimisel.
• Virtuaaltuurid (Üleilmsed): Asukohtade, muuseumide või kinnisvara kaasahaaravad tuurid kasutavad sageli tabamustestimist kasutaja navigeerimiseks ja interaktiivsete elementide jaoks virtuaalses keskkonnas.

Kokkuvõte

WebXR-i tabamustestide tulemuste ja kiirte heitmise töötlemise valdamine on veebis köitvate ja intuitiivsete AR- ja VR-kogemuste loomiseks hädavajalik. Mõistes aluspõhimõtteid ja rakendades selles blogipostituses kirjeldatud tehnikaid, saate luua kaasahaaravaid rakendusi, mis sulandavad sujuvalt virtuaalse ja reaalse maailma, või luua köitvaid virtuaalseid keskkondi loomulike ja intuitiivsete kasutajainteraktsioonidega. Ärge unustage optimeerida oma tabamustestimise implementatsiooni jõudluse osas ja arvestada platvormideülese ühilduvusega, et tagada sujuv kogemus kõigile kasutajatele. Kuna WebXR-i ökosüsteem areneb edasi, on oodata täiendavaid edusamme ja täiustusi tabamustesti API-s, mis avab veelgi rohkem loomingulisi võimalusi kaasahaarava veebiarenduse jaoks. Kõige ajakohasema teabe saamiseks konsulteerige alati uusimate WebXR-i spetsifikatsioonide ja brauseri dokumentatsiooniga.